<template>
    <div class="index-nav-grid">
        <router-link v-for="(nav, index) in navs" :to="nav.url" class="grid-item" :class="{'width-side-border':index%3==1,'width-bottom-border':index < Math.floor(navs.length/3)*3}">
            <div class="iconfont" :class="'icon-'+nav.dir"></div>
            {{nav.name}}
        </router-link>
    </div>
</template>

<script>
    import config, { fetchRest, getCategoryUrl } from "../config";
    export default {
        name: 'index-nav-grid',
        data() {
            var res = { navs: [] };
            async function getData() {
                var categorys = await fetchRest("category?isnavigation=1");
                categorys.forEach(category => category.url = getCategoryUrl(category));
                res.navs = categorys;
            }
            getData();
            return res;
        }
    }
</script>
<style scoped>
    .index-nav-grid{
        display: flex;
        flex-wrap:wrap;
    }
    .grid-item{
        width: 33.33%;
        box-sizing: border-box;
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
        border-style: solid;
        border-color: #DDD;
        border-width: 0;
        text-decoration: none;
        color:#333;
    }
    .width-side-border{
        border-left-width: 1px;
        border-right-width: 1px;
    }
    .width-bottom-border{
        border-bottom-width: 1px;
    }
    .iconfont{
        color: rgb(77, 182, 172);
        font-size: 28px;
        margin: 10px;
    }
</style>